<template>
   <!-- main开始     start -->
    <div class="main clearfix">
        <div class="login w">
            <div class="login_right">
                  
                    <div class="login_center">
                        <div class="right_top">
                            <h2>
                                <a href="">扫描登录</a>
                            </h2>
                            <h2>
                                <a href="">账户登录</a>
                            </h2>
                        </div>
                        <div class="right_center">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size='small'>

                                <el-form-item label="" prop='phone' :show-message='fleg' >
                                    <el-input type="text" v-model="ruleForm.phone"  @focus='setFocuse' @blur="SetBlur"  prefix-icon="el-icon-user" placeholder="请输入手机号" >
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="" prop="password" :show-message='fleg'>
                                    <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" @focus='setFocuse'   @blur="SetBlur">
                                    </el-input>
                                </el-form-item>

                                <div class="center_bottom">
                                    <label for="checkbox">
                                        <input type="checkbox" name="" id="checkbox" checked>&nbsp;自动登录
                                    </label>
                                    <a href="">忘记密码?</a>
                                </div>

                                <el-form-item>
                                    <el-button type="primary" class="login-form-button" @click="submitForm('ruleForm')">登   录</el-button>
                                </el-form-item>

                            </el-form>

                        </div>
                        <div class="right_bottom">
                           <ul>
                               <li>
                                   <a href="">
                                       <img src="./imges/qq.png" alt="">
                                   </a>
                               </li>
                               <li>
                                    <a href="">
                                        <img src="./imges/sina.png" alt="">
                                    </a>
                               </li>
                               <li>
                                    <a href="">
                                        <img src="./imges/ali.png" alt="">
                                    </a>
                               </li>
                               <li>
                                    <a href="">
                                        <img src="./imges/weixin.png" alt="">
                                    </a>
                               </li>
                           </ul>
                           <router-link to='/Register'>立即注册</router-link>
                           <!-- <a href.prevent="" ></a> -->
                        </div>
                    </div>
                
            </div>
        </div>
    </div>
    <!-- main结束        end -->
</template>

<script>
import 'animate.css/animate.min.css'
export default {
    name:'Login',
    data() {
        let validatePass = (rule, value, callback) => {
            let ispass =  /(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}/;
            if(value.length < 7){
                callback(new Error('密码至少8位'));
            }else if(value!=''&&ispass.test(value)) {
                 callback();
           }else{
               callback(new Error("至少包含字母与数字"))
           }       
            callback();     
      };
       let validatePhone = (rule, value, callback) => {
            let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(myreg.test(value)){
                callback();
            }else{
                  callback(new Error('请输入有效的手机号码，需是11位'));
            } 
        }

      return {
          fleg:true,
           ruleForm: {
                password: '',
                phone:'',
            },

            rules: {
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                phone: [
                    { validator: validatePhone, trigger: 'blur' },
                ],
                },
            }
    },
    methods: {
        // 移出显示提示信息
        SetBlur(){
           this.fleg=true
        },
        // 移入取消显示提示信息
        setFocuse(){
            this.fleg= false
        },
        // 登录验证
        submitForm(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                        let {phone,password} = this.ruleForm
                      let messign =   await this.$store.dispatch('user/goligin',{phone,password});
                        if (messign.data.code ==200) {
                            // 如果query参数存在  则跳转到query参数路由
                            sessionStorage.setItem('TOKEN',messign.data.data.token)
                            let path = this.$route.query.redirect || false
                            if (path) {
                                this.$router.replace(path)
                            }else{
                                this.$router.push('/Home')
                            } 
                        }else{
                            alert(messign.data.message)
                        }        
                } else {
                    alert('请正确填写信息')
                    return false;
                }
            });
        },
    },
}
</script>

<style lang="less" scoped>
 .main{
    width: 100%;
    height: 487px;
    background: url(./imges/loginbg.png);
    .login{
        height: 487px;
        .login_right{
            float: right;
            width: 420px;
            height: 406px;
            box-sizing: border-box;
            background: #fff;
            margin-top: 45px;
            padding: 20px;
            .login_center{
                height: 366px;
                border: 1px solid #ddd;
                box-sizing: border-box;
                .right_top{
                    display: flex;
                    h2{
                        width: 50%;
                        height: 50px;
                        line-height: 50px;
                        font-size: 20px;
                        font-weight: 700;
                        text-align: center;
                        border-right: 1px solid #ddd;
                        border-bottom: 1px solid #ddd;
                    }
                    &>h2:last-child{
                        a{
                            color: red;
                        }
                        border-bottom: 0;
                        border-right: 0;
                    }
                }
                .right_center{
                    margin-top: 18px;
                    box-sizing: border-box;
                    padding: 0px 20px;
                    .login-form-button{
                        margin-top: 25px;
                        width: 100%;
                        height: 36px;
                        background-color: rgb(225, 37, 27);
                        font-size: 16px;
                        border: 0px;
                    }
                    .el-form-item__content {
                        margin-left: 0px;
                        border: 1px solid red;
                    }
                    .el-form-item{
                        margin-left: 0;
                    }
                    i{
                        border: 1px solid red;
                        width: 37px;
                        height: 32px;
                        // border-right: 1px solid #ccc;
                        // border-top: 1px solid #ccc;
                        box-sizing: border-box;
                        border-radius: 2px 0 0 2px;
                        background: url(./imges/icons.png) no-repeat -10px -201px;
                        float: left;
                        z-index: -2;
                    }
                    input{
                        box-sizing: border-box;
                        border: 0;
                        width: 100%;
                        padding: 5px 5px 5px 8px;
                        text-decoration: 10px;
                    }
                    span{
                        position: absolute;
                        flex-basis: 100%;
                        top: 100%;
                        left: 35px;
                        color: red;
                    }
                    .center_top{
                        position: relative;
                        display: flex;
                        border:1px solid #ccc;
                        margin-top: 30px;
                        i{
                            border: 1px solid red;
                        }
                    }
                    .center_center{
                        margin-top: 20px;
                        i{
                            background:  url(./imges/icons.png) no-repeat -74px -201px;
                         
                        }
                    }
                    .center_bottom{
                        display: flex;
                        justify-content: space-between;
                        margin-top: 25px;
                        label{
                            font-size: 12px;
                            line-height: 18px;
                            input{
                                width: 13px;
                                vertical-align: middle;
                            }
                        }
                    }
                   .center_button{
                     margin-top: 30px; 
                       input{
                        width: 100%;
                        background-color: rgb(225, 37, 27);
                        color: rgb(255, 255, 255);
                        height: 36px;
                        font-size: 16px;
                        line-height: 36px;
                        padding: 0px;
                       }
                   }
                }
            }
            .right_bottom{
                padding: 0px 20px;
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                ul{
                    display: flex;
                    li{
                        margin-right: 5px;
                    }
                }
                a{
                        display: block;
                        font-size: 14px;
                        align-self: flex-end;
                }
                a:hover{
                    color: red;
                }
            }
        }
    }
   
}

.footer{
    background-color: #fff;
}
</style>